<template> 
    <div class="app-container">
       <el-row>
           <el-col :span="24" class="sa-col"  style="padding:0px 0 20px 0;">
                <el-radio-group style="float:left;"  v-model="param.type" @change="loadChart">
                    <el-radio-button label="0">今天</el-radio-button>
                    <el-radio-button label="1">昨天</el-radio-button>
                    <el-radio-button label="2">最近七天</el-radio-button>
                    <el-radio-button label="3">本月</el-radio-button>
                </el-radio-group>
                
                <el-radio-group  style="float:right;" v-model="param.stype" @change="loadChart">
                    <el-radio :label="1">总销售</el-radio>
                    <el-radio :label="2">会员</el-radio>
                    <el-radio :label="3">非会员</el-radio>
                </el-radio-group>
           </el-col>
       </el-row> 
       <el-row :gutter="20" style="margin-bottom:20px;">
            <el-col :span="4">
                <div class="total-frame frame-c1">
                    <div class="total-title">现金</div>
                    <div class="total-value">{{dayAmount.xianjin}}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="total-frame frame-c2"> 
                    <div class="total-title">刷卡</div>
                    <div class="total-value">{{dayAmount.shuaka}}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="total-frame frame-c3">
                    <div class="total-title">支付宝</div>
                    <div class="total-value">{{dayAmount.zhifubao}}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="total-frame frame-c4">
                    <div class="total-title">微信</div>
                    <div class="total-value">{{dayAmount.weiixn}}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="total-frame frame-c5"> 
                    <div class="total-title">翼支付</div>
                    <div class="total-value">{{dayAmount.yizhifu}}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="total-frame frame-c6">
                    <div class="total-title">云闪付</div>
                    <div class="total-value">{{dayAmount.yunshanfu}}</div>
                </div>
            </el-col>
        </el-row>
       <el-row>
           <el-col :span="24">
              <div :id="lineChartId" class="total-frame" style="min-height:350px;"></div>
           </el-col>
       </el-row> 
    </div>
</template> 
<script>
    //将$都替换为$
    import {getRealPriceByPayType} from '@/api/prm/pmsSkuOut'
    import echarts from 'echarts'
    import echartsTheme from "@/components/echarts/theme/westeros.json";

    export default {
        name: 'shopExpense', 
        data() {
            return {
                shops: [
                ],
               param:{
                    //0今天1昨天2最近7天 3本月
                    type:0,
                    //0热销
                    stype:1
               },
               dayAmount:{
                   xianjin:0,
                   zhifubao:0,
                   shuaka:0,
                   weixin:0,
                   yunshanfu:0,
                   yizhifu:0
               },
               lineChartId:"lineChart",
               lineChart:null,
               lineChartOption:{
                    legend: {data:['现金','刷卡','支付宝','微信','翼支付','云闪付']},
                    xAxis: {
                         type: 'category',   // 还有其他的type，可以去官网喵两眼哦
                         data: [],   // x轴数据
                         name: '日'
                    },
                    yAxis: {
                        type: 'value',
                        name: '金额'
                    },
                    tooltip: { trigger: 'axis'},
                    series: [
                        {
                            name: '现金',
                            data: [],
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    color: 'rgb(252, 107, 89)',
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            color: 'rgb(252, 107, 89)'
                                        }
                                    }
                                }
                            },
                        },
                         {
                            name: '刷卡',
                            data: [],
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    color: 'rgb(252, 185, 65)',
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            color: 'rgb(252, 185, 65)'
                                        }
                                    }
                                }
                            },
                        }, {
                            name: '支付宝',
                            data: [],
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    color: 'rgb(108, 175, 255)',
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            color: 'rgb(108, 175, 255)'
                                        }
                                    }
                                }
                            },
                        }, {
                            name: '微信',
                            data: [],
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    color: 'rgb(121, 213, 177)',
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            color: 'rgb(121, 213, 177)'
                                        }
                                    }
                                }
                            },
                        }, {
                            name: '翼支付',
                            data: [],
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    color: 'rgb(250, 92, 114)',
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            color: 'rgb(250, 92, 114)'
                                        }
                                    }
                                }
                            },
                        }, {
                            name: '云闪付',
                            data: [],
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    color: 'rgb(118, 144, 244)',
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            color: 'rgb(118, 144, 244)'
                                        }
                                    }
                                }
                            }
                        }
                    ]
               },
            }
        },
        created() {
            //this.initChart();
            this.loadChart();
        },
        filters: {
            formatCreateTime(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            }
        },
        beforeDestroy() {
			
			if (this.lineChart) {
                this.lineChart.dispose();
                this.lineChart = null;
			}
        },
        methods: {
            loadChart(){
               if (this.lineChart) {
                    this.lineChart.dispose();
                    this.lineChart = null;
                }
                getRealPriceByPayType(this.param).then(response => {
                    let result = response.data;
                    if(result){
                        let xAxis = ['现金','刷卡','支付宝','微信','翼支付','云闪付'];
                        let series = []
                        for(let item of result){
                            //xAxis.push(item.proName)
                            if(series.indexOf(item.payTime)==-1){
                                series.push(item.payTime)
                            }
                        }
                        series = series.reverse()
                        let sData = {
                            '现金':[],
                            '刷卡':[],
                            '支付宝':[],
                            '微信':[],
                            '翼支付':[],
                            '云闪付':[]
                        };
                        for(let dd of series){
                            let s = {}
                            for(let item of result){
                                if(item.payType=="现金"&&item.payTime==dd){
                                    s["现金"] = item.realPrice
                                }
                                else if(item.payType=="刷卡"&&item.payTime==dd){
                                    s["刷卡"] = item.realPrice
                                }
                                else if(item.payType=="支付宝"&&item.payTime==dd){
                                    s["支付宝"] = item.realPrice
                                }
                                else if(item.payType=="微信"&&item.payTime==dd){
                                    s["微信"] = item.realPrice
                                }
                                else if(item.payType=="翼支付"&&item.payTime==dd){
                                    s["翼支付"] = item.realPrice
                                }
                                else if(item.payType=="云闪付"&&item.payTime==dd){
                                    s["云闪付"] = item.realPrice
                                }else{

                                }
                            }
                            if(!s["现金"]) s["现金"] = 0
                            if(!s["刷卡"]) s["刷卡"] = 0
                            if(!s["支付宝"]) s["支付宝"] = 0
                            if(!s["微信"]) s["微信"] = 0
                            if(!s["翼支付"]) s["翼支付"] = 0
                            if(!s["云闪付"]) s["云闪付"] = 0
                            sData["现金"].push(s["现金"])
                            sData["刷卡"].push(s["刷卡"])
                            sData["支付宝"].push(s["支付宝"])
                            sData["微信"].push(s["微信"])
                            sData["翼支付"].push(s["翼支付"])
                            sData["云闪付"].push(s["云闪付"])
                        }
                        console.log(sData)
                         this.$nextTick(() => {
                            echarts.registerTheme('westeros', echartsTheme)
                            this.lineChart = echarts.init(document.getElementById(this.lineChartId),'westeros');
                            this.lineChartOption.xAxis.data =  series
                            this.lineChartOption.series[0].data =sData["现金"]
                            this.lineChartOption.series[1].data =sData["刷卡"]
                            this.lineChartOption.series[2].data =sData["支付宝"]
                            this.lineChartOption.series[3].data =sData["微信"]
                            this.lineChartOption.series[4].data =sData["翼支付"]
                            this.lineChartOption.series[5].data =sData["云闪付"]
                            this.lineChart.setOption(this.lineChartOption)
                        })

                        /*
                        let xAxis = [];
                        let series = []
                        for(let item of result){
                            xAxis.push(item.proName)
                            series.push(item.realPrice)
                        }
                        this.$nextTick(() => {
                            echarts.registerTheme('westeros', echartsTheme)
                            this.lineChart = echarts.init(document.getElementById(this.lineChartId),'westeros');
                            //this.lineChartOption.xAxis.data =  xAxis
                            //this.lineChartOption.series[0].data = series
                            this.lineChart.setOption(this.lineChartOption)
                        })
                        */

                    }
                
                });
            }
           
            
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss">
    .sa-col .el-radio{
        padding: 12px 10px;
    }
    .sa-col .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        color: #fff;
        background-color: red;
        border-color: red;
        -webkit-box-shadow: -1px 0 0 0 red;
        box-shadow: -1px 0 0 0 red;
    }
    .sa-col .el-radio-button__inner:hover {
        color: red;
    }

</style>
<style rel="stylesheet/scss" lang="scss" scoped>
    .app-container {
        padding: 25px;
    }
    .total-frame {
        border: 1px solid #DCDFE6;
        padding: 20px;
        height: 100px;
        border-radius: 5px;
    }
    .frame-c1{
        background:linear-gradient(left, rgb(252, 107, 89),rgb(252, 95, 85));
        color:#fff;
        line-height: 2;
    }
    .frame-c2{
        background:linear-gradient(left, rgb(252, 185, 65),rgb(252, 160, 71));
        color:#fff;
        line-height: 2;
    }
    .frame-c3{
        background:linear-gradient(left, rgb(108, 175, 255),rgb(92, 162, 255));
        color:#fff;
        line-height: 2;
    }
    .frame-c4{
        background:linear-gradient(left, rgb(121, 213, 177),rgb(95, 201, 219));
        color:#fff;
        line-height: 2;
    }
    .frame-c5{
        background:linear-gradient(left, rgb(250, 92, 114),rgb(253, 147, 73));
        color:#fff;
        line-height: 2;
    }
    .frame-c6{
        background:linear-gradient(left, rgb(118, 144, 244),rgb(67, 191, 233));
        color:#fff;
        line-height: 2;
    }
     .total-title {
        font-size: 14px;
    }

    .total-value {
        font-size: 18px;
    }
</style>


